<template>
  <div class="header-wrap">
    <!-- 左边 -->
    <div class="header-lf">
      <span class="home-btn" @click="pageFun">首页</span>
    </div>
    <!-- 中间 -->
    <div class="header-ct">
      <div class="screen-title">智慧旅游可视化大数据展示平台</div>
      <div class="screen-info">平台高峰预警信息（2条）</div>
    </div>
    <!-- 右边 -->
    <div class="header-rt">
      <span class="report-btn">统计报告</span>
      <span class="scr-time">当前时间：{{ curTime }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import moment from 'moment'

const router = useRouter()
const pageFun = () => {
  router.push('/')
}

const curTime = ref('')
let timer: any = 0
const getTimeFun = () => {
  curTime.value = moment(new Date().getTime()).format('YYYY年MM月DD HH:mm:ss')
}
onMounted(() => {
  getTimeFun()
  if (timer) {
    clearInterval(timer)
  }
  timer = setInterval(() => {
    getTimeFun()
  }, 1000)
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
$font_color: #05e8fe;

.header-wrap {
  display: flex;
  flex-direction: row;
  height: 38px;
  line-height: 38px;
  color: $font_color;
  text-align: center;

  .header-lf {
    position: relative;
    width: 567px;
    height: 100%;
    background: url('@/assets/imgs/screen/dataScreen-header-left-bg.png')
      no-repeat;
    background-size: 100% 100%;

    .home-btn {
      position: absolute;
      right: 0;
      width: 136px;
      height: 42px;
      background: url('@/assets/imgs/screen/dataScreen-header-btn-bg-l.png')
        no-repeat;
    }
  }

  .header-ct {
    flex: 2;
    height: 100%;

    .screen-title {
      height: 80px;
      line-height: 72px;
      // font-family: YouSheBiaoTiHei;
      font-size: 32px;
      // font-weight: bold;
      text-align: center;
      background: url('@/assets/imgs/screen/dataScreen-header-center-bg.png')
        no-repeat;
    }

    .screen-info {
      width: 660px;
      height: 44px;
      line-height: 44px;
      margin: -8px auto;
      color: #fff;
      background: url('@/assets/imgs/screen/dataScreen-header-warn-bg.png')
        no-repeat;
    }
  }

  .header-rt {
    position: relative;
    width: 567px;
    height: 100%;
    background: url('@/assets/imgs/screen/dataScreen-header-right-bg.png')
      no-repeat;
    background-size: 100% 100%;

    .report-btn {
      position: absolute;
      left: 0;
      width: 136px;
      height: 42px;
      background: url('@/assets/imgs/screen/dataScreen-header-btn-bg-r.png')
        no-repeat;
    }

    .scr-time {
      display: inline-block;
      width: 100%;
      padding-right: 30px;
      font-size: 17px;
      text-align: right;
    }
  }
}
</style>
